<template>
  <van-popup class="random-sign" v-model="$store.state.dias.randomSign.show" position="bottom" :overlay="true">
    <p class="title">随机签到</p>
    <p class="notice">系统将从”签到“学生中随机抽取</p>
    <p class="rate"><span class="color-red">*</span>几率为 3%</p>
    <ul class="search-results detail-list">
      <li v-for="(item, index) in $store.state.dias.randomSign.data" :key="index">
        <img :src="item.wx_pic||item.photo||defaultImg" alt="">
        <div class="content">
          <p><span>姓名：</span><span>{{item.name}}</span></p>
          <p><span>班级：</span><span>{{item.class}}</span></p>
          <p><span>学号：</span><span>{{item.number}}</span></p>
        </div>
        <div class="operate pr">
          <span :class="'pa active '+'color_'+item.state " @click="changeState(item)">{{item.state | formaltState}}</span>
        </div>
      </li>
    </ul>
    <div class="btn-box">
      <van-button type="primary" class="bc-green btn" @click="save">确定</van-button>
    </div>
  </van-popup>
</template>
<script>
export default {
  components:{
  },
  name: "",
  data () {
    return {
      defaultImg:require("../../../../assets/images/home/default.jpg"),
      stuInfo:{}
    };
  },
  filters:{
    formaltState(val){
      return ["","签到","迟到","请假","旷到"][val]
    }
  },
   methods:{
     changeState(item){
        this.stuInfo=item
        this.$store.state.dias.acheet.columns=["签到","迟到","请假","旷到"]
        this.$store.state.dias.acheet.show=true
        this.$store.state.dias.acheet.confirm=this.sureConfirm
     },
     sureConfirm(val){
       this.stuInfo.state=["签到","迟到","请假","旷到"].indexOf(val)-0+1
       this.$store.state.dias.acheet.show=false
     },

     save(){
       var params={
         id:_g.getRouterParams(this).id,
         list:JSON.stringify(this.$store.state.dias.randomSign.data)
       }
       _g.apiPost("Attendance/randConfirm",params).then(res=>{
         _g.toMessage(res)
         if(!res.error)this.$router.go(-1)
       })
     }
  },
   created(){
  }
}
</script>
<style lang="scss" scoped>
.random-sign{
  height: 70vh;

  .title{
    font-size: 18px;
    text-align: center;
    height: 90px;
    line-height: 90px;
    color: #333
  }
  .notice,>p{
    padding: 0 30px;
    color: #999;
    font-size: 13px;
  }
  .rate{
    border-bottom: 1px solid #efefef;
    padding-bottom: 20px;
  }

  .detail-list{
    max-height: 70vh;
    overflow: auto;
    li{
      display: flex;
      padding: 10px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #efefef;

      img{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-right: 20px;
      }

      .content{
        font-size: 13px;

        span:nth-of-type(2){
          color: #999
        }
      }
      .operate{
        margin-left: auto;

        >span{
          width: 80px;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          color: red;
        }
        >span:active{
          background-color: transparent;
        }
        .color_1{
          color: green
        }
        .color_2{
          color: #ffab34;
        }
        .color_3{
          color: #5c76fc;
        }
        .color_4{
          color: #ff3d3d;
        }
      }
    }
  }
  .btn-box{
    text-align: center;
  }
  .btn{
    font-size: 18px;
    width: calc(100% - 80px);
    margin: 40px auto 40px;
  }
}
</style>